<template>
	<div ref="${entityName}">
		<el-dialog title="${description}" :visible.sync="dialogFormVisible" :close-on-press-escape="false"
			:close-on-click-modal="false" @closed="afterCloseDialog">
			<el-form :model="${entityName?uncap_first}Form" ref="${entityName?uncap_first}Form" :rules="formRules" label-width="100px">
				<el-row>
<#list formFields as po>
					<el-col :md="${formColumnWidth*2}">
	<#if po.componentType == 'textarea'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-input type="textarea" v-model="${entityName?uncap_first}Form.${po.propertyName}"<#if (po.fieldLength > 0)> maxlength="${po.fieldLength?c}"</#if>></el-input>
						</el-form-item>
	<#elseif po.componentType == 'password'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-input v-model="${entityName?uncap_first}Form.${po.propertyName}"<#if (po.fieldLength > 0)> maxlength="${po.fieldLength?c}"</#if> show-password></el-input>
						</el-form-item>
	<#elseif po.componentType == 'date' && po.propertyType == 'Date'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-date-picker type="date" placeholder="选择日期" v-model="${entityName?uncap_first}Form.${po.propertyName}"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm" style="width: 100%;"></el-date-picker>
						</el-form-item>
	<#elseif po.componentType == 'date' && po.propertyType == 'String'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-date-picker type="date" placeholder="选择日期" v-model="${entityName?uncap_first}Form.${po.propertyName}"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
						</el-form-item>
	<#elseif po.componentType == 'radio'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-radio-group v-model="${entityName?uncap_first}Form.${po.propertyName}">
								<el-radio v-for="item in ${po.propertyName}List" :label="item.id" :key="item.id">{{item.name}}</el-radio>
							</el-radio-group>
						</el-form-item>
	<#elseif po.componentType == 'checkbox'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-checkbox-group v-model="${entityName?uncap_first}Form.${po.propertyName}s">
								<el-checkbox v-for="item in ${po.propertyName}List" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
	<#elseif po.componentType == 'select'>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-select v-model="${entityName?uncap_first}Form.${po.propertyName}" placeholder="请选择">
								<el-option v-for="item in ${po.propertyName}List" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
	<#else>
						<el-form-item label="${po.description}" prop="${po.propertyName}">
							<el-input v-model="${entityName?uncap_first}Form.${po.propertyName}"<#if (po.fieldLength > 0)> maxlength="${po.fieldLength?c}"</#if>></el-input>
						</el-form-item>
	</#if>
					</el-col>
	<#if (po_index + 1) % formColumnNum == 0 && po_has_next>
				</el-row>
				<el-row>
	</#if>
</#list>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
				<el-button type="primary" @click="saveForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "${entityName}",
	data() {
		return {
			dialogFormVisible: false,
			${entityName?uncap_first}Form: {
<#list formFields as po>
	<#if po.componentType == 'checkbox'>
				${po.propertyName}s: [],
	</#if>
				${po.propertyName}: null<#if po_has_next>,</#if>
</#list>
			},
<#list formFields as po>
	<#if po.componentType == 'radio' || po.componentType == 'checkbox' || po.componentType == 'select'>
			${po.propertyName}List: [
				{id:"1",name:"选项1"},
				{id:"2",name:"选项2"},
				{id:"3",name:"选项3"}
			],
	</#if>
</#list>
			formRules: {
<#list formFields as po>
	<#if po.formValidType??>
		<#if po.formValidType == 'required'>
				${po.propertyName}<#if po.componentType == 'checkbox'>s</#if>: [{ required: true, message: "请输入${po.description}" }]<#if po_has_next>,</#if>
		<#elseif po.formValidType == 'email'>
				${po.propertyName}<#if po.componentType == 'checkbox'>s</#if>: [ { type: "email", message: "请输入正确的邮箱" }]<#if po_has_next>,</#if>
		</#if>
	</#if>
</#list>
			}
		};
	},
	methods: {
		initForm(${pkPropertyName}) {
			if (${pkPropertyName}) {
				this.${entityName?uncap_first}Form.${pkPropertyName} = ${pkPropertyName};
				this.$api.post('/${entityName?uncap_first}/getById', {${pkPropertyName}:${pkPropertyName}}).then(response => {
					this.dialogFormVisible = true;
					let ${entityName?uncap_first} = response.data;
<#list formFields as po>
	<#if po.componentType == 'checkbox'>
					if(${entityName?uncap_first}.${po.propertyName}) {
						${entityName?uncap_first}.${po.propertyName}s = ${entityName?uncap_first}.${po.propertyName}.split(',');
					} else {
						${entityName?uncap_first}.${po.propertyName}s = [];
					}
	</#if>
</#list>
					this.${entityName?uncap_first}Form = ${entityName?uncap_first};
				});
			} else {
				this.dialogFormVisible = true;
			}
		},
		saveForm() {
			let url = '/${entityName?uncap_first}/add';
			if (this.${entityName?uncap_first}Form.${pkPropertyName}) {
				url = '/${entityName?uncap_first}/update';
			}

<#list formFields as po>
	<#if po.componentType == 'checkbox'>
			if(this.${entityName?uncap_first}Form.${po.propertyName}s) {
				this.${entityName?uncap_first}Form.${po.propertyName} = this.${entityName?uncap_first}Form.${po.propertyName}s.join(',');
			}
	</#if>
</#list>
			this.$refs.${entityName?uncap_first}Form.validate(valid => {
				if (valid) {
					this.$api.post(url, this.${entityName?uncap_first}Form).then(response => {
						if (response.success) {
							this.$message.success(response.message);
							this.dialogFormVisible = false;
							this.$parent.handleSearch();
						} else {
							this.$message.error(response.message);
						}
					});
				}
			});
		},
		afterCloseDialog() {
			this.${entityName?uncap_first}Form = {
<#list formFields as po>
	<#if po.componentType == 'checkbox'>
				${po.propertyName}s: [],
	</#if>
				${po.propertyName}: null<#if po_has_next>,</#if>
</#list>
			};
			this.$refs.${entityName?uncap_first}Form.resetFields();
		}
	}
};
</script>
